<template>
  <div class="help-container">
    <div class="page-header">
      <h2>❓ 帮助文档</h2>
      <p>了解如何使用文档转换器的各项功能</p>
    </div>

    <div class="help-content">
      <!-- 搜索框 -->
      <div class="help-search">
        <div class="search-box">
          <input type="text" 
                 placeholder="搜索帮助内容..."
                 value.bind="searchTerm"
                 input.trigger="setSearchTerm($event.target.value)"
                 class="form-input">
          <span class="search-icon">🔍</span>
        </div>
      </div>

      <div class="help-layout">
        <!-- 侧边栏导航 -->
        <div class="help-sidebar">
          <nav class="help-nav">
            <ul class="nav-list">
              <li repeat.for="section of getFilteredSections()" 
                  class="nav-item">
                <a href="#" 
                   class="nav-link ${activeSection === section.id ? 'active' : ''}"
                   click.trigger="setActiveSection(section.id)">
                  <span class="nav-icon">${section.icon}</span>
                  <span class="nav-text">${section.title}</span>
                </a>
              </li>
            </ul>
          </nav>
          
          <!-- 操作按钮 -->
          <div class="help-actions">
            <button type="button" 
                    class="btn btn-outline btn-sm"
                    click.trigger="printHelp()"
                    title="打印当前页面">
              🖨️ 打印
            </button>
            <button type="button" 
                    class="btn btn-outline btn-sm"
                    click.trigger="exportHelp()"
                    title="导出帮助文档">
              📤 导出
            </button>
          </div>
        </div>

        <!-- 主内容区域 -->
        <div class="help-main">
          <div class="help-section" if.bind="getSectionContent(activeSection)">
            <div class="section-header">
              <h1>
                ${getSectionContent(activeSection).icon} 
                ${getSectionContent(activeSection).title}
              </h1>
            </div>
            
            <div class="section-content" 
                 innerhtml.bind="highlightSearchTerm(getSectionContent(activeSection).content)">
            </div>
          </div>

          <!-- 搜索无结果 -->
          <div class="no-results" if.bind="searchTerm && getFilteredSections().length === 0">
            <div class="no-results-icon">🔍</div>
            <h3>未找到相关内容</h3>
            <p>尝试使用其他关键词搜索</p>
            <button type="button" 
                    class="btn btn-outline"
                    click.trigger="setSearchTerm('')">
              清除搜索
            </button>
          </div>
        </div>
      </div>

      <!-- 快速链接 -->
      <div class="quick-links" if.bind="!searchTerm">
        <h3>快速链接</h3>
        <div class="links-grid">
          <a href="/single-convert" class="quick-link">
            <span class="link-icon">📄</span>
            <span class="link-title">单文件转换</span>
            <span class="link-desc">快速转换单个文档</span>
          </a>
          <a href="/batch-convert" class="quick-link">
            <span class="link-icon">📚</span>
            <span class="link-title">批量转换</span>
            <span class="link-desc">同时处理多个文件</span>
          </a>
          <a href="/format-settings" class="quick-link">
            <span class="link-icon">⚙️</span>
            <span class="link-title">格式设置</span>
            <span class="link-desc">自定义转换参数</span>
          </a>
          <a href="/conversion-history" class="quick-link">
            <span class="link-icon">📋</span>
            <span class="link-title">转换历史</span>
            <span class="link-desc">查看转换记录</span>
          </a>
        </div>
      </div>

      <!-- 常见问题快速访问 -->
      <div class="faq-shortcuts" if.bind="!searchTerm">
        <h3>常见问题</h3>
        <div class="faq-list">
          <button type="button" 
                  class="faq-item"
                  click.trigger="setActiveSectionAndSearch('troubleshooting', '上传文件')">
            <span class="faq-icon">❓</span>
            <span class="faq-text">为什么无法上传文件？</span>
          </button>
          <button type="button" 
                  class="faq-item"
                  click.trigger="setActiveSectionAndSearch('troubleshooting', '转换失败')">
            <span class="faq-icon">❓</span>
            <span class="faq-text">转换失败怎么办？</span>
          </button>
          <button type="button" 
                  class="faq-item"
                  click.trigger="setActiveSectionAndSearch('troubleshooting', '转换速度')">
            <span class="faq-icon">❓</span>
            <span class="faq-text">转换速度很慢？</span>
          </button>
          <button type="button" 
                  class="faq-item"
                  click.trigger="setActiveSectionAndSearch('overview', '支持格式')">
            <span class="faq-icon">❓</span>
            <span class="faq-text">支持哪些文件格式？</span>
          </button>
        </div>
      </div>

      <!-- 联系支持 -->
      <div class="support-section">
        <div class="support-card">
          <h3>需要更多帮助？</h3>
          <p>如果您在使用过程中遇到问题，可以通过以下方式联系我们：</p>
          <div class="support-contacts">
            <div class="contact-item">
              <span class="contact-icon">📧</span>
              <span class="contact-text">support@example.com</span>
            </div>
            <div class="contact-item">
              <span class="contact-icon">💬</span>
              <span class="contact-text">在线客服：工作日 9:00-18:00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 